<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a {
				text-decoration: none;
			}
			
			* {
				padding: 0px;
				margin: 0px;
			}
			
			#id1 {
				width: 1130px;
				margin: 0px auto;
				margin-left: 100px;
			}
			
			#id2 {
				margin: 0px auto;
				width: 1130px;
				height: 588px;
				background-image: url(img/l.jpg);
			}
			
			.no1 {
				height: 523px;
				width: 400px;
				background-color: white;
				float: right;
				margin-top: 40px;
				text-align: center;
			}
			
			#h1 {
				margin-left: 60px;
				margin-top: 25px;
				float: left;
				border-right: 2px solid;
				padding-right: 35px;
				border-right-color: #E7E7E7;
			}
			
			#h1:hover {
				cursor: pointer;
				color: #F56600;
			}
			
			#h2:hover {
				cursor: pointer;
				color: #F56600;
			}
			
			#h2 {
				float: left;
				margin-top: 25px;
				margin-left: 40px;
			}
			h2.active{
				color: #F56600;
			}
			.no1-4 {
				margin-left: 30px;
				float: left;
				margin-top: 40px;
			}
			
			.no1-4 input {
				height: 47px;
				width: 337px;
				outline: none;
			}
			
			.no1-5 {
				margin-left: 30px;
				float: left;
				margin-top: 20px;
			}
			
			.no1-5 input {
				height: 47px;
				width: 337px;
				outline: none;
			}
			
			.no1-5 p {
				font-size: 13px;
				color: #F56600;
				display: none;
				margin-bottom: -5px;
			}
			
			.no1-6 {
				margin-left: 30px;
				float: left;
				margin-top: 20px;
			}
			
			.no1-6 input {
				height: 47px;
				width: 337px;
				color: white;
				background-color: #F56600;
				border: none;
				font-size: 18px;
				outline: none;
			}
			
			.no1-6 input:hover {
				cursor: pointer;
			}
			
			.no1-7 {
				float: left;
				font-size: 12px;
				color: #99A5C2;
				margin-top: 20px;
				margin-left: 130px;
			}
			
			.no1-7 span {
				margin-right: 10px;
			}
			
			.no1-7 a {
				color: #99A5C2;
			}
			
			.no1-8 {
				width: 337px;
				float: left;
				margin-top: 80px;
				margin-left: 30px;
				font-size: 12px;
				color: #99A5C2;
				border-bottom: 1px solid#E0E0E0;
			}
			
			.no1-8 span {
				position: relative;
				top: 8px;
				left: 150px;
			}
			
			#ri {
				display: none;
				text-align: center;
				width: 400px;
			}
			
			.r-1 {
				margin-top: 170px;
			}
			
			.r-2 {
				margin-top: 10px;
				font-size: 13px;
				color: #757575;
			}
			
			.r-3 {
				font-size: 13px;
				color: #757575;
				margin-top: 10px;
			}
			
			#le {
				clear: both;
			}
			#p1{
				height: 28px;
				width: 85px;
				line-height: 28px;
				position: relative;
				top: 10px;
			}
			#p2{
				height: 28px;
				width: 100px;
				line-height: 28px;
				position: relative;
				top: 10px;
			}
			#p3{
				height: 28px;
				width: 85px;
				line-height: 28px;
				position: relative;
				top: 10px;
			}
			#p4{
				height: 28px;
				width: 85px;
				line-height: 28px;
				position: relative;
				top: 10px;
			}
			#p1 img{
				float: left;
				position: relative;
				top: 50%;
				margin-top: -7px;
			}
			#p1 span{
				float: right;
			}
			#p2 img{
				float: left;
				position: relative;
				top: 50%;
				margin-top: -7px;
			}
			#p2 span{
				float: right;
			}
			#p3 img{
				float: left;
				position: relative;
				top: 50%;
				margin-top: -7px;
			}
			#p3 span{
				float: right;
			}
			#p4 img{
				float: left;
				position: relative;
				top: 50%;
				margin-top: -7px;
			}
			#p4 span{
				float: right;
			}
		</style>
	</head>

	<body>
		<form onsubmit="return dengLu()">
			<div id="id1">
				<img src="img/mistore_logo.png" />
			</div>
			<div style="width: 100%;background-color: #15222B;">
				<div id="id2">
					<div class="no1">
						<div class="no1-1">
							<h2 id="h1" class="active">账号登录</h2>
							<h2 id="h2">扫码登录</h2>
						</div>
						<div id="le">
							<div class="no1-4">
								<input type="text" name="zhanghao" id="zh" placeholder="邮箱/手机号码/小米账号" value="" />
							</div>
							<div class="no1-5">
								<input type="password" name="password" id="pw" placeholder="密码" value="" />
								<p id="p1"><img src="img/xia.png" /><span >请输入账号</span></p>
								<p id="p2"><img src="img/xia.png" align="center" /><span >用户名不正确</span></p>
								<p id="p3"><img src="img/xia.png" align="center" /><span >请输入密码</span></p>
								<p id="p4"><img src="img/xia.png" align="center" /><span >密码不正确</span></p>
							</div>
							<div class="no1-6">
								<input type="submit" name="submit" id="st" value="立即登录" />
							</div>
							<div class="no1-7">
								<span><a href="#">注册小米账号</a></span>
								<span>|</span>
								<span><a href="#">忘记密码？</a></span>
							</div>
							<div class="no1-8">
								<span>其他方式登录</span>
							</div>
						</div>
						<div id="ri">
							<div class="r-1">
								<img src="img/erwei.png" />
							</div>
							<div class="r-2">
								使用<span style="color: #FF6700;">小米商城APP</span>扫一扫
							</div>
							<div class="r-3">
								MIUI系统可进入「设置」-「我的小米」扫码登录
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
		<script type="text/javascript">
			var n = document.getElementById("zh");
			var p = document.getElementById("pw");
			var go = true;
			function dengLu() {
				var r1 = /\d/.test(n.value);
				var r2 = /\d{11}/.test(n.value);
				var r3 = /\w/.test(p.value);
				if(!r1) {
					document.getElementById("p1").style.display = "block";
					return false;
				} else {
					document.getElementById("p1").style.display = "none";
					if(r2) {
						document.getElementById("p2").style.display = "none";
						go = true;
					} else {
						document.getElementById("p2").style.display = "block";
						return false;
					}
				}
				if(!r3) {
					document.getElementById("p3").style.display = "block";
					return false;
				} else {
					document.getElementById("p3").style.display = "none";
					go = true;
				}
				return go;
			}
			var h1 = document.getElementById("h1");
			var h2 = document.getElementById("h2");
			h1.addEventListener("click", function() {
				var div = this.parentNode.parentNode;
				var le = div.children[1];
				var ri = div.children[2];
				le.style.display = "block";
				ri.style.display = "none";
			});
			h2.addEventListener("click", function() {
				var div = this.parentNode.parentNode;
				var le = div.children[1];
				var ri = div.children[2];
				le.style.display = "none";
				ri.style.display = "block";
			});
			var hs=document.querySelectorAll(".no1-1 h2");
			for (var i = 0; i < hs.length; i++) {
				hs[i].addEventListener("click",function  () {
					var div=this.parentNode;
					div.children[0].removeAttribute("class");
					div.children[1].removeAttribute("class");
					this.className="active";
				})
			}
		</script>
	</body>

</html>